import {iconUrl, imagesUrl, paramIconUrl} from '@/libs/baseUrl'
import {paramStatus2Color, percent2Color} from '@/libs/text2Color'
import {devStatus2ImgName, percent2ImgName} from '@/libs/text2ImgName'
import {CSSProperties, PropType} from 'vue'
import {CnMediumSpan, CnNormalSpan} from './text'

export const CImage = defineComponent({
  props: {
    imgName: {
      type: String,
      required: true
    },
    onClick: {
      type: Function,
      default: () => {}
    },
    title: String
  },

  setup(this, props, {slots}) {
    return () => (
      <img
        v-lazy={imagesUrl(props.imgName)}
        style={{
          width: '24px',
          height: '24px'
        }}
        onClick={() => {
          props.onClick && props.onClick()
        }}
        title={props.title || ''}
      ></img>
    )
  }
})

export const IconImg = defineComponent({
  props: {
    imgName: {
      type: String,
      required: true
    },
    style: Object as PropType<CSSProperties>,
    onClick: {
      type: Function,
      default: () => {}
    }
  },

  setup(this, props, {slots}) {
    return () => (
      <img
        v-lazy={iconUrl(props.imgName)}
        style={Object.assign(
          {
            width: '24px',
            height: '24px'
          },
          props.style
        )}
        onClick={() => {
          props.onClick && props.onClick()
        }}
      ></img>
    )
  }
})

export const ParamStatus = defineComponent({
  props: {
    status: {
      type: String,
      default: '适宜'
    },
    isCircle: {
      type: Boolean,
      default: true
    },
    style: Object as PropType<CSSProperties>
  },
  setup(props) {
    return () => (
      <span
        class='inline-block mr-8'
        style={Object.assign(
          {
            width: `8px`,
            height: `8px`,
            backgroundColor: paramStatus2Color(props.status),
            'border-radius': props.isCircle ? '9999px' : '0px'
          },
          props.style
        )}
      ></span>
    )
  }
})

export const ParamOfStatus = defineComponent({
  props: {
    status: {
      type: String,
      default: '适宜'
    },
    name: {
      type: String,
      default: ''
    },
    isCircle: {
      type: Boolean,
      default: true
    },
    showStatusText: {
      type: Boolean,
      default: true
    },
    statusStyle: Object as PropType<CSSProperties>
  },
  setup(props, {slots}) {
    return () => (
      <span class='inline-flex items-center'>
        <ParamStatus
          status={props.status}
          isCircle={props.isCircle}
          style={props.statusStyle}
        ></ParamStatus>
        {props.showStatusText ? (
          <CnNormalSpan class='text-11'>
            {slots.default ? slots.default() : props.name ? props.name : props.status}
          </CnNormalSpan>
        ) : null}
      </span>
    )
  }
})

export const ParamIcon = defineComponent({
  props: {
    imgName: {
      type: String,
      required: true
    },
    onClick: {
      type: Function,
      default: () => {}
    },
    style: Object as PropType<CSSProperties>
  },

  setup(props, {slots}) {
    return () => (
      <img
        v-lazy={paramIconUrl(props.imgName)}
        style={Object.assign(
          {
            width: '24px',
            height: '24px'
          },
          props.style
        )}
        onClick={() => {
          props.onClick && props.onClick()
        }}
      ></img>
    )
  }
})

export const ParamOfIcon = defineComponent({
  props: {
    imgName: {
      type: String,
      required: true
    },
    name: {
      type: String,
      default: ''
    },
    imgStyle: Object as PropType<CSSProperties>
  },
  setup(props, {slots}) {
    return () => (
      <span class='inline-flex items-center'>
        <ParamIcon imgName={props.imgName} style={Object.assign({}, props.imgStyle)}></ParamIcon>
        <CnNormalSpan class='text-11'>
          {slots.default ? slots.default() : props.name ? props.name : props.imgName}
        </CnNormalSpan>
      </span>
    )
  }
})

export const LiveDataParamOfIcon = defineComponent({
  props: {
    imgName: {
      type: String,
      required: true
    },
    name: {
      type: String,
      default: ''
    },
    imgStyle: Object as PropType<CSSProperties>
  },
  setup(props, {slots}) {
    return () => (
      <span class='inline-flex items-center'>
        <div class='flex-1 flex items-center justify-end'>
          <ParamIcon
            imgName={'liveData-' + props.imgName}
            style={Object.assign({}, props.imgStyle)}
          ></ParamIcon>
        </div>
        <div class='flex-1 flex items-center justify-start'>
          <CnNormalSpan class='text-11'>
            {slots.default ? slots.default() : props.name ? props.name : props.imgName}
          </CnNormalSpan>
        </div>
      </span>
    )
  }
})

/**设备状态图片 */
export const DeviceStatus = defineComponent({
  props: {
    status: {
      type: String as PropType<DevStatusCode>,
      default: '在线'
    },
    style: Object as PropType<CSSProperties>
  },
  setup(props) {
    return () => (
      <img
        class='inline-block'
        v-lazy={iconUrl(devStatus2ImgName(props.status))}
        style={Object.assign(
          {
            width: '16px',
            height: '16px'
          },
          props.style
        )}
      ></img>
    )
  }
})
/**设备状态图片加文字 */
export const DeviceStatusOfStatus = defineComponent({
  props: {
    status: {
      type: String as PropType<DevStatusCode>,
      default: '在线'
    },
    imgStyle: Object as PropType<CSSProperties>
  },
  setup(props, {slots}) {
    return () => (
      <span class='inline-flex items-center'>
        <DeviceStatus status={props.status} style={props.imgStyle}></DeviceStatus>
        <CnNormalSpan class='ml-6'>{slots.default ? slots.default() : props.status}</CnNormalSpan>
      </span>
    )
  }
})

/**百分比状态图片 */
export const PercentStatus = defineComponent({
  props: {
    percent: {
      type: Number,
      default: 0
    },
    style: Object as PropType<CSSProperties>
  },
  setup(props) {
    return () => (
      <img
        class='inline-block'
        v-lazy={iconUrl(percent2ImgName(props.percent))}
        style={Object.assign(
          {
            width: '12px',
            height: '12px'
          },
          props.style
        )}
      ></img>
    )
  }
})

/**百分比状态图片及文字 */
export const PercentStatusOfPercent = defineComponent({
  props: {
    percent: {
      type: Number,
      default: 0
    },
    imgStyle: Object as PropType<CSSProperties>,
    textStyle: Object as PropType<CSSProperties>
  },
  setup(props) {
    return () => (
      <div class='inline-flex items-center'>
        <PercentStatus
          class={[props.percent !== 0 ? 'animate-bounce' : '']}
          percent={props.percent}
          style={props.imgStyle}
        ></PercentStatus>
        <CnNormalSpan
          class='ml-6'
          style={Object.assign(
            {
              color: percent2Color(props.percent)
            },
            props.textStyle
          )}
        >
          {Math.abs(props.percent)}%
        </CnNormalSpan>
      </div>
    )
  }
})

/**
 * 设备名称，自带图片
 */
export const DeviceName = defineComponent({
  props: {
    imgStyle: Object as PropType<CSSProperties>
  },
  setup(props, {slots}) {
    return () => (
      <span
        style={{
          display: 'inline-flex',
          alignItems: 'center',
          overflow: 'hidden'
        }}
      >
        <IconImg
          imgName='device-active'
          style={Object.assign(
            {
              marginRight: '4px',
              width: '16px',
              height: '13px'
            },
            props.imgStyle
          )}
        ></IconImg>
        <CnMediumSpan class='flex-1'>
          {slots.default ? slots.default() : '未设置设备名称'}
        </CnMediumSpan>
      </span>
    )
  }
})
